<template>
  <div class="guarantee-add">
    <van-nav-bar class="header"
                 title="事故报修"
                 left-arrow
                 @click-left="goBack()">
      <span slot="right"
            @click="submit">完成</span>
    </van-nav-bar>
    <div class="weaper">
      <van-cell-group class="fengniao-form form">
        <div class="form-items">
          <van-field v-model="form.description"
                     type="textarea"
                     placeholder="请输入你要报修的内容"
                     rows="10"
                     autosize
                     class="form-item" />
          <van-upload-field v-model="form.picPaths"
                            @getId="getId"
                            type="repair"></van-upload-field>
        </div>

        <div class="form-items">
          <van-field center
                     class="form-item"
                     label="联系人"
                     v-model="userInfo.ownName || userInfo.username"
                     disabled
                     laceholder="请输入联系人" />
          <van-field center
                     class="form-item"
                     label="手机"
                     v-model="userInfo.phone"
                     disabled=p
                     laceholder="请输入手机" />
          <van-field v-if="!isWuye"
                     center
                     class="form-item"
                     label="地址"
                     v-model="address"
                     placeholder="请输入地址"
                     disabled />
        </div>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { asyncValidator } from '@/util/validate';
import { addObj } from '@/api/guarantee';
import baseCommon from '@/mixins/common';
import vanUploadField from '@/components/upload/main';

export default {
  name: 'guaranteeAdd',
  mixins: [baseCommon()],
  components: {
    vanUploadField,
  },
  data() {
    return {
      rules: {
        description: { type: 'string', required: true, message: '请输入报修内容' },
      },
      form: {
        id: '',
        picPaths: [],
        picPath: '',
        houseId: undefined,
        description: undefined,
        suggestType: undefined,
        unitId: undefined,
        buildingId: undefined,
        communityId: undefined,
        liftUser: undefined,
      },
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'address', 'isWuye', 'community']),
  },
  created() {
    this.init();
  },
  mounted() { },
  methods: {
    getId(id) {
      this.form.id = id;
    },
    init() {
      if (!this.isWuye) {
        this.form.houseId = this.userInfo.houseId;
        this.form.unitId = this.userInfo.unitId;
        this.form.buildingId = this.community.buildingId;
      } else {
        this.form.status = 1;
      }
      this.form.communityId = this.community.communityId;
      this.form.liftUser = this.userInfo.userId;
      this.form.liftUserName = this.isWuye ? this.userInfo.username : this.userInfo.ownName;
    },
    submit() {
      this.form.picPath = this.form.picPaths.toString();
      asyncValidator(this.rules, this.form).then(() => addObj(this.form)).then(() => {
        this.$message.success({
          message: '提交成功，感谢您的反馈',
          duration: 1500,
        });
        this.goBack();
      }).catch((errors) => {
        this.$message.warning({
          message: errors[0].message,
          duration: 1500,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.guarantee-add {
}
</style>

